<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div class="box">box</div>
    
<script>
// 事件循环
// 事件：鼠标事件、计时器、ajax请求、Promise ...
// 循环：事件重复触发

// 浏览器的渲染进程中的主要线程：各个主要线程之间如何配合完成工作
// 1.GUI渲染线程，负责渲染浏览器界面（与JS引擎线程是互斥的关系）
// 2.JS引擎线程，负责解析执行JS脚本（解析到script标签时开始工作）
// 3.事件触发线程，负责管理控制事件的触发（管理着一个事件队列）
// 4.计时器线程，负责给某个函数计时
// 5.异步http请求线程，负责异步ajax请求

/* // 事件队列：[f1]
// 执行栈：
    // console.log( 1 )
    // setTimeout() -> 告诉计时器线程，给f1计时1000毫秒，然后f1加入事件队列
    // console.log( 3 )
    // JS引擎线程空闲，开始处理事件队列中的回调函数
    // f1()
        // console.log( 2 )

console.log( 1 )
setTimeout(()=>{// f1
    console.log( 2 )
},1000)
console.log( 3 ) */


/* // 事件队列：[f1,f2]
// 执行栈：
    // console.log( 1 )
    // setTimeout() -> 告诉计时器线程，给f1计时1000毫秒，然后f1加入事件队列
    // console.log( 5 )
    // JS引擎线程空闲，开始处理事件队列中的回调函数
    // f1()
        // console.log( 2 )
        // setTimeout() -> 告诉计时器线程，给f2计时500毫秒，然后f2加入事件队列
        // console.log( 4 )
    // JS引擎线程空闲，开始处理事件队列中的回调函数
    // f2()
        // console.log( 3 )

console.log( 1 )
setTimeout(()=>{// f1
    console.log( 2 )
    setTimeout(()=>{// f2
        console.log( 3 )
    },500)
    console.log( 4 )
},1000)
console.log( 5 ) */


// 当一段脚本要执行时：
// 1.JS引擎线程先解析这段脚本，按照执行顺序先后加入执行栈
// 2.当JS引擎线程执行到异步任务时，将异步任务交给其他线程处理
// 3.如果异步任务符合触发条件时，回调函数会被加入事件队列等待JS引擎线程来处理
// 4.当JS引擎线程空闲时，开始处理事件队列中的回调函数
// 5.因为回调函数内部又可能有同步和异步任务，所以可能会重复上面的1234步
// 以上代码执行过程 即 事件循环

// 不同的异步任务之间优先级并不相同
// 异步任务可以分为：微任务和宏任务
// 微任务：Promise.then async/await ...
// 宏任务：计时器、ajax请求...
// JS引擎 优先处理微任务，再处理宏任务


// 微队列：[f3]
// 宏队列：[f1]
// 执行栈：
    // console.log( 1 )
    // setTimeout() -> 告诉计时器线程给f1计时器0毫秒，然后f1加入宏队列
    // new Promise()
        // f2()
            // console.log( 3 )
            // resolve() -> promise实例对象改变为成功，然后f3加入微队列
    // then() 指定promise实例对象成功状态的回调函数
    // console.log( 5 )
    // JS引擎线程空闲，开始处理微队列中的回调函数
    // f3()
        // console.log( 4 )
    // JS引擎线程空闲，开始处理宏队列中的回调函数
    // f1()
        // console.log( 2 )

console.log( 1 )
setTimeout(()=>{// f1
    console.log( 2 )
},0)
new Promise((resolve,reject)=>{// f2
    console.log( 3 )
    resolve()
})
.then(()=>{// f3
    console.log( 4 )
})
console.log( 5 )

</script>
</body>
</html>